<template>
  <div id="hometop">
    <nut-searchbar @click-input="search">
      <template v-slot:rightout>
        <div v-if="isLogin" @click="this.$router.push('/')">登录</div>
        <div v-else @click="change">{{ words }}</div>
      </template>
    </nut-searchbar>
    <!-- 签到遮盖层 -->
    <nut-overlay
      v-model:visible="show2"
      :z-index="2000"
      lock-scroll="true"
      :close-on-click-overlay="isShowOverlay"
    >
      <div class="wrapper">
        <div class="content"><img src="../assets/signIn.png" /></div>
        <p class="point">
          <nut-icon
            name="close"
            color="#fff"
            @click="isShowOverlay = true"
          ></nut-icon>
        </p>
      </div>
    </nut-overlay>
  </div>
</template>

<script>
//  import { toRefs, reactive } from 'vue';

export default {
  name: 'homeTop',
  data () {
    return {
      show2: false,
      words: '签到',
      isShowOverlay: false,
      move: true,
      isLogin: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scrollShow)

    // 判断是否登录存在token
    const token = localStorage.getItem('token')
    console.log(token);
    if (!token) {
      this.isLogin = true
    } else {

      this.isLogin = false
    }
  },
  methods: {
    change () {
      this.show2 = true,
        this.words = '已签到'
    },
    // 点击搜索框跳转搜索页面
    search () {
      this.$router.push('/search/searchindex');
    },
    scrollShow () {
      if (window.pageYOffset > 100) {
        this.move = true
      } else {
        this.move = false
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.v-leave-from {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-leave-active {
  transition: all 3s;
}

#hometop {
  ::v-deep .nut-searchbar__search-input {
    background-color: #eae9e5;
  }
  ::v-deep .nut-searchbar__right-search-icon {
    width: 14.667vw;
    height: 6.667vw;
    color: #c1ab96;
    border: #c1ab96 0.267vw solid;
    border-radius: 4vw;
  }
  .wrapper {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    //签到图片
    .content {
      display: flex;
      width: 53.333vw;
      height: 53.333vw;

      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        height: 100%;
        border-radius: 2.133vw;
      }
    }
    // 点击关闭按钮
    .point {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 6.667vw auto;
      width: 7.467vw;
      height: 7.467vw;
      border-radius: 50%;
      border: white 0.267vw solid;
    }
  }
}
</style>